<template>
  <el-dialog
    :title="'选择礼品'"
    append-to-body
    :close-on-click-modal="false"
    @close="closeDialog()"
    :visible="visible"
    width="1200px"
  >
    <basic-container>
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="优惠券名称" prop="couponName">
          <el-input
            v-model.trim="queryParams.couponName"
            placeholder="请输入优惠券名称"
            clearable
            size="small"
            @keyup.enter.native="getDataList"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getDataList"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <div class="avue-crud">
        <el-table :data="dataList" border v-loading="dataListLoading" :row-key="getRowKey" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
          <el-table-column
            type="index"
            header-align="center"
            :index="indexMethod"
            align="center"
            label="编号"
          >
          </el-table-column>
          <el-table-column
            prop="couponName"
            header-align="center"
            align="center"
            label="优惠券名称"
            width="200px"
          >
          </el-table-column>
          <el-table-column
            prop="couponCate"
            header-align="center"
            align="center"
            label="种类"
            width="120px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.couponCate === '1'">用户领取</span>
              <span v-else-if="scope.row.couponCate === '2'">手动发放</span>
              <span v-else-if="scope.row.couponCate === '3'">付费卷</span>
              <span v-else>新人卷</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="couponType"
            header-align="center"
            align="center"
            label="类型"
            width="120px">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.couponType === '1'">代金券</el-tag>
              <el-tag v-else>折扣券</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="orderPrice"
            header-align="center"
            align="center"
            label="订单金额"
            :formatter="formatMoney"
            width="120px">
          </el-table-column>

          <el-table-column
            prop="orderPrice"
            header-align="center"
            align="center"
            label="优惠减免"
            width="120px">
            <template slot-scope="scope">
              <template v-if="scope.row.couponType == '1'">
                <span>-</span>
                <span style="margin-left: 5px">{{scope.row.deductionPrice | formatMoneyToYuanFilter}}</span>
              </template>
              <template v-else-if="scope.row.couponType == '2'">
                <span >{{scope.row.discountRate | formatRateFilter}}</span>
                <span style="margin-left: 2px">折</span>
              </template>
              <template v-else>
                <span>未知</span>
              </template>
            </template>
          </el-table-column>

          <el-table-column label="优惠券时间区间" align="center" prop>
            <el-table-column
              prop="expirationType"
              header-align="center"
              align="center"
              label="到期类型"
              width="120px">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.expirationType === '1'">领券后生效</el-tag>
                <el-tag v-else>固定时间段</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="领券后失效时间"
              align="center"
              width="150"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.expirationType === '1'">领取后{{scope.row.effectiveDays}}天内有效</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              label="开始时间"
              align="center"
              prop="refundTime"
              width="150"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.expirationType === '2'">{{formatDate(scope.row.effectiveStartDate)}}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              label="结束时间"
              align="center"
              prop="refundTime"
              width="150"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.expirationType === '2'">{{formatDate(scope.row.effectiveEndDate)}}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column
            prop="createTime"
            header-align="center"
            align="center"
            label="创建时间"
            width="150px"
          >
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="queryParams.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </basic-container>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { fetchList, giveCoupon } from "@/api/shop_user/coupon";
import {CouponCateEnum} from '@/const/const';

export default {
  data(){
    return{
      CouponCateEnum,
      canSubmit: false,

      queryParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      dataList: [],

      totalPage: 0,
      dataListLoading: false,

      multipleSelection:[],
      userInfo:null
    }
  },
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  methods:{

    formatDate(val){
      const date = this.dayjs(val).format('YYYY-MM-DD')
      return date
    },

    getRowKey(row) {
      return row.id 
    },
    
    /**
     * 初始化
     */
    init(userInfo){
      this.userInfo = userInfo
      this.canSubmit = true;
      this.getDataList();
    },

    /**
     * 获取数据列表
     */
    getDataList() {
      this.dataListLoading = true;
      fetchList(
        Object.assign({
          couponName: this.queryParams.couponName,
          current: this.queryParams.pageIndex,
          size: this.queryParams.pageSize,
          couponCate: CouponCateEnum.give,
          status: '1' // 已上架的优惠券
        })
      ).then((response) => {
        this.dataListLoading = false;
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
      });
    },

    /**
     * 每页数
     */
    sizeChangeHandle(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageIndex = 1;
      this.getDataList();
    },

    /**
     * 当前页
     */
    currentChangeHandle(val) {
      this.queryParams.pageIndex = val;
      this.getDataList();
    },

    /**
     * 重置
     */
    resetQuery() {
      this.queryParams.pageIndex = 1;
      this.queryParams.pageSize = 10;
      this.resetForm("queryForm");
      this.getDataList();
    },

    indexMethod(index) {
      return (
        (this.queryParams.pageIndex - 1) * this.queryParams.pageSize + index + 1
      );
    },

    //重置表单
    closeDialog() {
      this.$emit('update:visible', false)
    },

    /**
     * 获取勾选项目
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /**
     * 提交选择礼品
     */
    dataFormSubmit(){
      if(this.multipleSelection.length <= 0){
        this.$notify.error('请勾选需要赠送的优惠券');
        return
      }
      this.multipleSelection.forEach(item=>{
        item.shopUserId = this.userInfo.id
      })
      giveCoupon(this.multipleSelection).then(res=>{
        this.$notify.success("赠送成功");
        this.closeDialog()
      })
    }
  }
}
</script>



<style scoped lang="scss">

::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .dialogForm .form-outer {
  padding: 0 20px;
  .form-inner {
    padding: 0;
  }
}
</style>